<template>
  <div class="video-container">
    <van-nav-bar class="videojzapp" fixed left-text="家政服务" slot="left" />
    <!-- 搜索栏 -->
    <div class="search">
      <van-search
        background="#354499"
        v-model="value"
        placeholder="智能匹配"
        @click="isshowhouse = true"
      />
      <span :value="columnsvalue" @click="isaddressshow = true">{{
        columnsvalue
      }}</span>
      <van-icon
        class="searchicon"
        :name="isaddressshow ? 'arrow-down' : 'play'"
        size="17"
        color="#FFFFFF"
      />
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="qa-swipe">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 标签 -->
    <div class="qatab">
      <van-cell title="热门服务" class="qavancell" />
      <van-tag
        color="#a3a0a0"
        plain
        round
        v-for="(item, index) in serverLiset"
        :key="index"
        @click="nannyDetails(index)"
        :class="isActive == index && isActive !== false ? 'active' : ''"
        >{{ item }}</van-tag
      >
    </div>
    <!-- 季度最佳 -->
    <div class="qalist">
      <div class="title">
        <h3><b>季度最佳</b></h3>
        <h4>品德端正，爱岗敬业，具有奉献精神</h4>
      </div>
      <van-pull-refresh
        v-model="refreshing"
        @refresh="personneServers"
        :success-text="refreshSuccessText"
        success-duration="1200"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          @load="loadCompany"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
        >
          <servers-list
            v-for="(item, index) in companyList"
            :key="index"
            :servers="item"
          ></servers-list>
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- 产品中心 -->
    <section class="floor_1_main">
      <div class="title">
        <h3><b>家政保洁项目</b></h3>
        <h4>保洁项目全，服务品质高，上门速度快</h4>
      </div>
      <div class="floor_1" id="floor_1">
        <!--产品分类开始-->
        <div class="imenu hd clearfix">
          <ul class="list clearfix"></ul>
        </div>
        <!--产品分类结束-->
        <div class="productlist">
          <div class="bd">
            <van-grid :border="false" :column-num="2">
              <van-grid-item @click="$router.push('/cleaningproject')">
                <van-image
                  src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041G64432.jpg"
                />
                <h3>保姆服务</h3>
              </van-grid-item>
              <van-grid-item @click="$router.push('/cleaningproject')">
                <van-image
                  src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041G64343.jpg"
                />
                <h3>月嫂服务</h3>
              </van-grid-item>
              <van-grid-item @click="$router.push('/babycare')">
                <van-image
                  src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041G64308.jpg"
                />
                <h3>育儿嫂服务</h3>
              </van-grid-item>
              <van-grid-item @click="$router.push('/babycare')">
                <van-image
                  src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041G64222.jpg"
                />
                <h3>居家保洁</h3>
              </van-grid-item>
              <van-grid-item @click="$router.push('/cleaningproject')">
                <van-image
                  src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041G63929.jpg"
                />
                <h3>家电清洗</h3>
              </van-grid-item>
              <van-grid-item @click="$router.push('/cleaningproject')">
                <van-image
                  src="http://www.jiazhengsm.com/uploads/allimg/200417/1-20041G63P7.jpg"
                />
                <h3>单位清洁</h3>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </section>

    <!-- 家政保洁中心简介 -->
    <section class="floor_5_main">
      <div class="title">
        <h3><b>家政保洁中心简介</b></h3>
        <h4>因为专注所以专业，家政保洁服务中心致力于为您打造最便捷的服务</h4>
      </div>
      <div class="iabout">
        <img src="http://www.jiazhengsm.com/skin/images/about.jpg" />
        <h3>黑马家政公司</h3>
        <p class="desc" @click="$router.push('my/about')">
          湖南家政平台是由新湖南客户端、湖南征信公司、兴业银行长沙分行、中国人寿湖南分公司共同建设的一个集微信、H5手机端、电脑PC端、APP四网合一的人工智能家庭服务家政平台，帮助家服企业通过家政平台实现在线推广服务，在线签合同，子凹陷支付，家服人员档案管理、家服人员派单管理等服务，从而提高工作效率与服务质量的家政服务平台...
        </p>
      </div>
    </section>

    <!-- 智能匹配弹框 -->
    <van-popup
      v-model="isshowhouse"
      position="bottom"
      :style="{ height: '90%' }"
    >
      <personnel-add></personnel-add>
    </van-popup>
    <!-- 地址弹出层 -->
    <van-popup v-model="isaddressshow" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
// 公司人员详情组件
import ServersList from '@/components/servers-list'
import { getoccupation, getBabySitter } from '@/api/home.js'
// 智能匹配组件
import personnelAdd from './personnel-Add'
export default {
  name: 'PersonnelIndex',
  components: {
    ServersList,
    personnelAdd
  },
  created () {
    // 初始化渲染
    this.personneServers()
    this.loadCompany()
  },
  watch: {
    columnsvalue (value) {
      window.localStorage.setItem('11', value)
    }
  },
  data () {
    return {
      value: '',
      isActive: false, // 高亮
      serverLiset: [], // 职业项
      companyList: [], // 公司人员详情
      finished: false,
      isshowhouse: false, // 控制智能组件的隐藏
      isaddressshow: false, // 控制地标的弹层
      columnsvalue: window.localStorage.getItem('11') || '长沙',
      columns: ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德市', '张家界', '益阳', '其他'],
      images: [
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1982183714,3515031938&fm=26&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1884446251,2107306090&fm=26&gp=0.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606981740046&di=08887d4b5beb53ace3e75cd951459ff3&imgtype=0&src=http%3A%2F%2F2f.zol-img.com.cn%2Fproduct%2F131_500x2000%2F141%2FceDAh9GK5UbWg.jpg'
      ],
      // 刷新
      loading: false,
      // 刷新状态
      refreshing: false,
      error: false,
      // 下拉刷新成功文本提示
      refreshSuccessText: '刷新成功!',
      finishedText: ''
    }
  },
  methods: {
    // 获取职业详情项目
    async personneServers () {
      try {
        this.finishedText = '数据加载中......'
        const res = await getoccupation()
        // console.log(res.data[0])
        this.serverLiset = res.data[0].tags
        this.refreshSuccessText = '刷新成功!'
        this.loading = false
        this.refreshing = false
        this.finishedText = '没有更多了'
      } catch (err) {
        this.$toast.fail('获取失败')
        this.refreshSuccessText = '刷新失败!'
        this.loading = false
        this.refreshing = false
      }
    },
    // 月嫂tab项
    async loadCompany () {
      this.loading = true
      try {
        const { data } = await getBabySitter()
        // console.log(data)
        this.companyList = data
        this.finished = true
      } catch (error) {
        this.$toast.fail('获取失败')
        this.error = true
      }
      this.Loading = false
    },
    onConfirm (value) {
      this.columnsvalue = value
      this.isaddressshow = false
    },
    nannyDetails (index) {
      this.isActive = index
      this.$router.push('/details')
    }
  }
}
</script>

<style lang="less" scoped>
.video-container {
  background-color: #fff;
  .van-hairline--bottom::after {
    border: 0 !important;
  }
  .videojzapp {
    background-color: #354499;
    font-size: 32px;
    font-weight: bold;
    /deep/ .van-nav-bar__text {
      color: #ffffff;
    }
  }
  .van-search__content {
    margin-top: 30px;
  }
  /deep/ .search {
    display: flex;
    justify-self: center;
    align-items: center;
    background-color: #354499;
    width: 750px;
    height: 138px;
    margin-top: 56px;
    .van-search {
      width: 620px;
      height: 60px;
    }
    span {
      font-size: 28px;
      margin-top: 20px;
      color: #ffffff;
    }
    .searchicon {
      margin-top: 25px;
    }
  }
  // 轮播图
  .qa-swipe {
    height: 200px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  // 标签
  .qatab {
    .van-cell {
      font-size: 38px;
      font-weight: 700;
      color: #354499;
    }
    background-color: #fff;
    height: 220px;
    /deep/ .van-tag {
      text-align: center;
      font-size: 20px;
      padding: 10px 40px;
      margin-left: 20px;
    }
  }
  // 产品中心
  .floor_1_main {
    background-color: #fff;
    .title {
      width: 100%;
      padding-bottom: 0.4rem;
      text-align: center;
      padding-top: 0.5rem;
      position: relative;
      margin-top: -120px;
      h3 {
        width: 100%;
        padding-bottom: 0.4rem;
        text-align: center;
        padding-top: 0.5rem;
        position: relative;
        b {
          color: #009b4c;
          font-weight: bold;
        }
      }
      h4 {
        color: #333;
        font-size: 0.24rem;
        letter-spacing: 0.05rem;
        margin-top: -72px;
      }
    }
    .productlist {
      overflow: hidden;
      padding: 0 3% 3%;
      h3 {
        color: #333;
        font-size: 0.24rem;
        height: 0.64rem;
        line-height: 0.64rem;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
  // 季度最佳
  .qalist {
    background-color: #fff;
    .title {
      h3 {
        width: 100%;
        padding-bottom: 0.4rem;
        text-align: center;
        padding-top: 0.5rem;
        position: relative;
        b {
          color: #009b4c;
          font-weight: bold;
        }
      }
      h4 {
        text-align: center;
        color: #333;
        font-size: 0.24rem;
        letter-spacing: 0.05rem;
        margin-top: -72px;
      }
    }
  }
  // 家政保洁中心简介
  .floor_5_main {
    .title {
      margin-top: -120px;
      h3 {
        width: 100%;
        padding-bottom: 30px;
        text-align: center;
        padding-top: 45px;
        position: relative;
        b {
          color: #009b4c;
          font-weight: bold;
        }
      }
      h4 {
        text-align: center;
        color: #333;
        font-size: 18px;
        letter-spacing: 4px;
        margin-top: -72px;
      }
    }
    .iabout {
      padding: 22px 14px 36px;
      img {
        max-width: 100% !important;
        display: block;
        margin: 0 auto;
      }
      h3 {
        font-size: 30px;
        padding: 8px 0;
        text-align: center;
      }
      .desc {
        font-size: 18px;
        line-height: 50px;
        padding-bottom: 80px;
      }
    }
  }

  .active {
    color: #3f51b5 !important;
  }
}
</style>
